<template>
  <div style="">
    <div class="top">
      <div class="top-name">
        <el-image style="width: 80px; height: 40px;margin-left:0px" class="fl" :src="require('@/assets/image/logo.png')" fit="fill"></el-image>
        <div class="top-title fl">岗位能力考核系统</div>
      </div>
      <div class="top-bottom">
          <div class="top-left">
              考试名称
          </div>
          <div class="top-right">
              <div class="time">
                  <div class="time-top">开始时间</div>
                  <div class="time-bottom">9：00</div>
              </div>
              <div class="time">
                  <div class="time-top">结束时间</div>
                  <div class="time-bottom">11：30</div>
              </div>
              <div class="type">未计时</div>
          </div>
      </div>
    </div>
    <div class="body">
        <div class="body-left">
            <div class="body-title">
                <span style="margin-left: 24px;">共36道题，满分100分。</span>
            </div>
            <div class="body-content">
                <div class="body-content-name">{{index+1}}.题目是什么什么</div>
                <div class="body-select" v-for="(item, index) in list" :key="index">
                   <div class="select">
                     <el-image style="width: 30px; height: 30px;margin-right:5px" class="fl" :src="require(index==1?'@/assets/image/select.png':'@/assets/image/noSelect.png')" fit="fill"></el-image>
                     <div class="fl select-text" :style="index==1?'color:#1E90FB':'color:#333333'"><span style="font-weight: bold;">A.</span>第{{index+1}}题</div>
                   </div>
                </div>
            </div>
            <div class="body-bottom">
                <el-button :disabled="true" size="smell" class="button1">下一题</el-button>
                <el-button :disabled="true" size="smell" class="button1">上一题</el-button>
                <el-button :disabled="true" size="smell" class="button1">标记本题</el-button>
            </div>
        </div>
        <div class="body-right">
          <div class="body-right-body">
            <div class="tihaos">
              <div class="tihao" :style="getStyle(index, item)" v-for="(item, index) in 20" :key="index">
                {{index+1}}
              </div>
            </div>
            <div class="tihao-types">
              <div class="tihao-type">
                <div class="tihao-type1">123</div>
                <div class="tihao-type2">未答</div>
              </div>
              <div class="tihao-type">
                <div class="tihao-type1" style="border: 1px solid rgba(30, 144, 251, 1);">2</div>
                <div class="tihao-type2">当前</div>
              </div>
              <div class="tihao-type">
                <div class="tihao-type1" style="background-color: rgba(227, 237, 255, 1);">3</div>
                <div class="tihao-type2">已达</div>
              </div>
              <div class="tihao-type">
                <div class="tihao-type1" style="background-color: rgba(12, 192, 210, 1);color: rgba(255, 255, 255, 100);">4</div>
                <div class="tihao-type2">标记</div>
              </div>
            </div>
          </div>
          <div v-if="true" class="kaoshi">开始考试</div>
          <div v-else class="jiaojuan">提交试卷</div>
        </div>
    </div>
    <el-dialog title="添加专业" width="50%" :visible.sync="dialogAdd">
      <el-row>
        <el-col :span="span1"><div class="label">专业：</div></el-col>
        <el-col :span="24-span1"><el-input v-model="value" size="small" /></el-col>
      </el-row>
      <el-row>
        <el-col :span="span1"><div class="label">人员类别：</div></el-col>
        <el-col :span="span2"><el-input v-model="value" size="small" /></el-col>
        <el-col :span="24-span1-span2"><div style="width:100%;min-height:32px">11</div></el-col>
        <el-col :span="12">
          <el-input style="width:80%" v-model="value" size="small" /><div class="label">新增岗位</div>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAdd = false">取 消</el-button>
        <el-button type="primary" @click="dialogAdd = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data () {
    return {
      index: 0,
      span1: 3,
      span2: 9,
      dialogAdd: false,
      index_jibie: 0,
      value: '',
      values: [],
      list: ['', '', '', ''],
      form: {},
      jibies: [{
        name: '级别一',
        value: 1,
      }, {
        name: '级别二',
        value: 2,
      }],
      zhuanyes: [{
        panduan: false
      },{
        panduan: false
      }],
      options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }]
    }
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    getStyle(index, item) {
      let str = index%6==0?' margin-left:0px;':' margin-left:3px;'
      if (index==1) {
        str += ' border: 1px solid rgba(30, 144, 251, 1);'
      }
      if (index==2) {
        str += ' background-color: rgba(227, 237, 255, 1);'
      }
      if (index==3) {
        str += ' color: rgba(255, 255, 255, 100); background-color: rgba(12, 192, 210, 1);'
      }
      console.log(str)
      return str
    }
  }
}
</script>

<style lang="scss" scoped>
.top-jibie{
  float: left;
  width: 60px;
  height: 46px;
  margin-right: 30px;
  color: rgba(153, 153, 153, 100);
  font-size: 14px;
  text-align: center;
  font-family: PingFangSC-Regular;
  display: flex;
  justify-content: center;
  align-items: center;
}
.top-select {
  color: #1890FF;
  border-bottom: 2px solid #1890FF;
}

.top-title{
    margin-top:16px;
    color: rgba(102, 102, 102, 100);
    font-size: 20px;
    font-family: MicrosoftYaHei;
    font-weight: bold;
    margin-left: 12px;
}
.top-bottom{
    width:100%;
    height: 68px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.top-left{
    color: rgba(58, 86, 135, 100);
    font-size: 30px;
    font-weight: bold;
    font-family: MicrosoftYaHei;
}
.top-right{
//   min-width: 400px;
  height: 68px;
  overflow: hidden;
  color: #1E90FB;
  font-size: 16px;
//   display: flex;
//   justify-content: center;
//   align-items: center;
}
.time{
    float: left;
    margin-left: 6px;
    width: 120px;
    height: 68px;
}
.type{
    float: left;
    margin-left: 8px;
    width: 158px;
    height: 68px;
    color: rgba(30, 144, 251, 100);
    font-size: 36px;
    font-weight: bold;
    font-family: MicrosoftYaHei;
    border-radius: 2px;
    background-color: rgba(227, 237, 255, 1);
    display: flex;
    justify-content: center;
    align-items: center;
}
.time-top{
    width:100%;
    height: 30px;
    color: rgba(255, 255, 255, 100);
    font-size: 14px;
    font-weight: bold;
    font-family: MicrosoftYaHei;
    background-color: #1E90FB;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.time-bottom{
    width:100%;
    height: 38px;
    color: rgba(30, 144, 251, 100);
    font-size: 18px;
    font-weight: bold;
    font-family: MicrosoftYaHei;
    display: flex;
    justify-content: center;
    align-items: center;
}
.body{
    margin-top: 14px;
    margin-left: 20px;
    width:100%;
    height: calc(100vh - 118px - 14px - 40px);
}
.body-left{
    float:left;
    width: calc(100% - 340px);
    height: 100%;
    background-color:white;
}
.body-right{
    float:right;
    width: 340px;
    height: 100%;
}
.body-right-body{
  width:100%;
  height:calc(100% - 45px - 20px);
}
.body-title{
    width: 100%;
    height:40px;
    background-color: rgba(30, 144, 251, 1);
    color: rgba(255, 255, 255, 100);
    font-size: 16px;
    font-family: MicrosoftYaHei;
    font-weight: bold;
    line-height: 40px;
}
.body-content{
    margin: 20px 20px 0 20px;
    width: calc(100% - 40px);
    height:calc(100% - 105px - 20px);
    background-color:pink;
}
.body-bottom{
    width:100%;
    height:40px;
    margin-top:10px;
}
.button1{
    margin-left:20px;
    border-radius: 4px;
    float:left;
    // width: 136px;
    // height: 45px;
}
.body-content-name {
  margin-bottom: 10px;
  color: rgba(51, 51, 51, 100);
  font-size: 18px;
  font-family: MicrosoftYaHei;
}
.body-select{
  margin-top: 20px;
  widows: 100%;
  min-height:30px;
}
.select-text{
  line-height: 30px;
  color: rgba(51, 51, 51, 100);
  font-size: 18px;
  font-family: MicrosoftYaHei;
}
.tihaos{
  width:280px;
  margin-left: 20px;
  margin-bottom: 40px;
  overflow: hidden;
  color: rgba(30, 144, 251, 100);
  font-size: 16px;
  font-family: MicrosoftYaHei;
  font-weight: bold;
  // background-color:pink;
}
.tihao{
  float: left;
  width:44px;
  height:44px;
  margin-bottom: 3px;
  background-color: white;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tihao-types{
  width:280px;
  margin-left: 20px;
  height:40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(30, 144, 251, 100);
  font-size: 16px;
  font-family: MicrosoftYaHei;
  font-weight: bold;
}
.tihao-type1{
  width:64px;
  height:40px;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 1);
  display: flex;
  justify-content: center;
  align-items: center;
}
.tihao-type2{
  width:64px;
  height:40px;

  display: flex;
  justify-content: center;
  align-items: center;
}

.kaoshi{
  width: 280px;
  height: 45px;
  margin-left: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(255, 255, 255, 100);
  font-size: 18px;
  font-weight:bold;
  background-image: linear-gradient(#0AD7AB, #0ABFD5);
  border-radius: 4px;
}
.jiaojuan{
  width: 280px;
  height: 45px;
  margin-left: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(255, 255, 255, 100);
  font-size: 18px;
  font-weight:bold;
  background-image: linear-gradient(#FF7C7C, #DD5353);
  border-radius: 4px;
}
</style>
